<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./页面样式.css">
</head>
<body>
    <div class="box">
        英雄列表管理<br><input type="text" placeholder="输入英雄名称" class="smc"><br>
        <select name="" class="sxb">
            <option value="">--选择性别--</option>
            <option value="">男</option>
            <option value="">女</option>
        </select><br>
        <input type="text" placeholder="输入年龄" class="snl"><br>
        <button>搜索</button>  <button onclick="cz()">重置</button>  <button onclick="show()">添加</button>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>英雄名称</th>
                    <th>英雄性别</th>
                    <th>年龄</th>b
                    <th>操作区</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </div>
    <div class="mtk">
        <h3>添加英雄</h3><br>
        英雄名称<br><input type="text" placeholder="输入英雄名称" class="mc"><br>
        性别<br><select name="" class="xb">
            <option value="">--选择性别--</option>
            <option value="">男</option>
            <option value="">女</option>
        </select><br>
        <input type="text" placeholder="输入年龄" class="nl"><br>
        <button onclick="no()">取消</button>   <button onclick="add()">确认</button>
    </div>
</body>
</html>
<script>
    var smc=document.querySelector('.smc')
    var snl=document.querySelector('.snl')
    var sxb=document.querySelector('.sxb')
    var mc=document.querySelector('.mc')
    var nl=document.querySelector('.nl')
    var xb=document.querySelector('.xb')
    var mtk=document.querySelector('.mtk')
    var tbody=document.querySelector('tbody')
    var a=1;
    var data=[
    {
        'uname':'亚索',
        'sex':'男',
        'age':'18',
    },{
        'uname':'永恩',
        'sex':'男',
        'age':'19',
    },{
        'uname':'石头人',
        'sex':'男',
        'age':'200',
    },{
        'uname':'拉克丝',
        'sex':'女',
        'age':'20',
    },{
        'uname':'金克丝',
        'sex':'女',
        'age':'22',
    }]
    function get(){
        var sj=localStorage.getItem('data')
        if(sj!=null){
            return JSON.parse(sj)
        }else{
            return []
        }
    }
    function set(abc){
        localStorage.setItem('data',JSON.stringify(abc))
    }
    function get(){
        var a= localStorage.getItem('data')
        if(a!=null){
            return JSON.parse(a)
        }else{
            return []
        }
    }
    set(data)
    function cz(){
        smc.value=''
        snl.value=''
        sxb.value=''
    }
    function show(){
        mtk.style.display='block'
    }
    function no(){
        mtk.style.display='none'
    }
    function add(){
        var shuju=get()
        shuju.push({
            uname:mc.value,
            sex:xb.value,
            age:nl.value
        })
        set(shuju)
        mc.value=''
        xb.value=''
        nl.value=''
        xr()
    }
    function xr(){
        tbody.innerHTML=''
        var shuju=get()
        for(i=0;i<shuju.length;i++){
            //创建
            var tr=document.createElement('tr')
            //赋值
            tr.innerHTML=`
            <td>${a++}</td>
            <td>${shuju[i].uname}</td>
            <td>${shuju[i].sex}</td>
            <td>${shuju[i].age}</td>
            <td>
            <button class="del(${i})">删除</button> <button class="update(${i})">编辑</button>
            </td>
            `;
            //添加
            tbody.appendChild(tr)
        }

    }
    xr()
    function del(aaa){
        alert(666)
        var shuju=get()
        shuju.splice(aaa,1)
        set(shuju)
        xr()
    }
    
</script>